<!--
 * @Date: 2020-09-21 12:08:22
 * @LastEditors: 小枫
 * @LastEditTime: 2020-09-21 17:09:01
 * @FilePath: \feng-blog-admin\src\views\ManageTags.vue
-->
<template lang="pug">
  .manage-tag
    el-table(:data='tags', style='width: 100%')
      el-table-column(label='封面', width='280')
        template(slot-scope='scope')
          el-avatar(
            :src="scope.row.photoUrl",
            fit="scale-down",
            shape="square"
            )
      el-table-column(label='分类', width='280')
        template(slot-scope='scope')
          el-tag(size='medium') {{ scope.row.tag }}
      el-table-column(label='操作')
        template(slot-scope='scope')
          el-button(
            size='mini',
            @click='handleEdit(scope.$index, scope.row)'
            ) 编辑
          el-button(
            size='mini',
            type='danger',
            @click='handleDelete(scope.$index, scope.row)',
            slot='reference'
            ) 删除
    el-dialog(
      title='修改分类信息',
      :visible.sync='dialogFormVisible',
      :before-close="closeDialog"
      )
      el-form(:model='tagForm')
        el-form-item(label='分类名称', label-width='120px')
          el-input(v-model='tagForm.tag', autocomplete='off')
        el-form-item(label='活动区域', label-width='120px')
          el-input(v-model='tagForm.photoUrl', autocomplete='off')
      .dialog-footer(slot='footer')
        el-button(@click='closeDialog') 取 消
        el-button(type='primary', @click='updateTag') 确 定
</template>

<script>
export default {
  data () {
    return {
      tags: [],
      tagForm: {
        tag: '',
        photoUrl: ''
      },
      dialogFormVisible: false,
      tid: null
    }
  },
  methods: {
    getAllTags () {
      this.$http.get('/tags').then(
        res => {
          if (res) {
            this.tags = res.data.data
            // console.log(this.tags)
          }
        }
      )
    },
    deleteTag (tid) {
      this.$http.delete(`/tags/${tid}`).then(
        res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.$router.go(0)
          }
        }
      )
    },
    updateTag () {
      this.$http.put(`/tags/${this.tid}`, this.tagForm).then(
        res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.dialogFormVisible = false
            this.$router.go(0)
          }
        }
      )
    },
    closeDialog () {
      this.dialogFormVisible = false
      this.tagForm.tag = ''
      this.tagForm.photoUrl = ''
    },
    handleEdit (index, row) {
      this.tid = row.tid
      this.tagForm.tag = row.tag
      this.tagForm.photoUrl = row.photoUrl
      this.dialogFormVisible = true
      // console.log(index, row)
    },
    handleDelete (index, row) {
      this.$confirm('确认删除？')
        .then(_ => {
          this.deleteTag(row.tid)
        })
        .catch(_ => {})
    }
  },
  created () {
    this.getAllTags()
  }
}
</script>

<style lang="less" scoped>
</style>
